$(document).ready(function () {
    $(document).on('click', '.img-preview', function () {
        const imageUrl = $(this).attr('src'); // 获取图片的 src 属性
        showImagePreview(imageUrl); // 调用弹框预览函数
    });
});

// 弹出图片预览
function showImagePreview(imageUrl) {
    // 确保页面没有重复的模态框
    if ($('.image-preview-modal').length) {
        $('.image-preview-modal').remove();
    }

    // 创建一个模态框元素
    const $modal = $('<div class="image-preview-modal">')
        .css({
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '100%',
            'height': '100%',
            'background-color': 'rgba(0, 0, 0, 0.8)',
            'display': 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'z-index': '1000'
        });

    // 创建一个图片容器
    const $imgContainer = $('<div class="img-container">')
        .css({
            'max-width': '80%',
            'max-height': '80%',
            'position': 'relative'
        });

    // 创建关闭按钮
    const $closeButton = $('<button class="close-button">X</button>')
        .css({
            'position': 'absolute',
            'top': '3px',
            'right': '9px',
            'background-color': 'transparent',
            'border': 'none',
            'color': '#fff',
            'font-size': '24px',
            'cursor': 'pointer'
        })
        .on('click', function () {
            $modal.remove(); // 关闭模态框
        });

    // 创建图片元素并设置图片来源
    const $image = $('<img>').attr('src', imageUrl).css({
        'max-width': '100%',
        'max-height': '100%',
        'border-radius': '5px'
    });

    // 组装模态框内容
    $imgContainer.append($closeButton, $image);
    $modal.append($imgContainer);

    // 将模态框添加到页面中
    $('body').append($modal);
}